{"ast":null,"code":"var _jsxFileName = \"/data/messenger.client/src/components/Carousel/index.tsx\",\n  _s = $RefreshSig$();\nimport React from 'react';\nimport { FaChevronLeft, FaChevronRight } from 'react-icons/fa';\nimport './Carousel.scss';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst Carousel = _ref => {\n  _s();\n  let {\n    children,\n    width\n  } = _ref;\n  const [items, setItems] = React.useState([]);\n  const [offset, setOffset] = React.useState(0);\n  const handleLeftArrowClick = () => {\n    setOffset(currentOffset => {\n      return Math.min(currentOffset + width, 0);\n    });\n  };\n  const handleRightArrowClick = () => {\n    setOffset(currentOffset => {\n      const maxOffset = -(width * (items.length - 1));\n      return Math.max(currentOffset - width, maxOffset);\n    });\n  };\n  React.useEffect(() => {\n    setItems(React.Children.map(children, child => {\n      return /*#__PURE__*/React.cloneElement(child, {\n        style: {\n          height: '100%',\n          minWidth: `${width}px`,\n          maxWidth: `${width}px`\n        }\n      });\n    }));\n  }, []);\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"carousel-mainContainer\",\n    children: [/*#__PURE__*/_jsxDEV(FaChevronLeft, {\n      className: \"arrow\",\n      onClick: handleLeftArrowClick\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 41,\n      columnNumber: 13\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"carousel-mainContainer-window\",\n      children: /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"all-items-container\",\n        style: {\n          transform: `translateX(${offset}px)`\n        },\n        children: items\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 43,\n        columnNumber: 17\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 42,\n      columnNumber: 13\n    }, this), /*#__PURE__*/_jsxDEV(FaChevronRight, {\n      className: \"arrow\",\n      onClick: handleRightArrowClick\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 51,\n      columnNumber: 13\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 40,\n    columnNumber: 9\n  }, this);\n};\n_s(Carousel, \"qLWpMKFCM4MWrLAsoJVcK8abWDg=\");\n_c = Carousel;\nexport default Carousel;\nvar _c;\n$RefreshReg$(_c, \"Carousel\");","map":{"version":3,"names":["React","FaChevronLeft","FaChevronRight","Carousel","children","width","items","setItems","useState","offset","setOffset","handleLeftArrowClick","currentOffset","Math","min","handleRightArrowClick","maxOffset","length","max","useEffect","Children","map","child","cloneElement","style","height","minWidth","maxWidth","transform"],"sources":["/data/messenger.client/src/components/Carousel/index.tsx"],"sourcesContent":["import React, {ReactNode} from 'react';\nimport { FaChevronLeft, FaChevronRight } from 'react-icons/fa';\nimport './Carousel.scss';\nconst Carousel = ({children, width}: {\n    children: JSX.Element | JSX.Element[];\n    width: number;\n}) => {\n    const [items, setItems] = React.useState<ReactNode[]>([]);\n    const [offset, setOffset] = React.useState<number>(0);\n\n    const handleLeftArrowClick = () => {\n        setOffset((currentOffset) => {\n            return Math.min(currentOffset + width, 0);\n        });\n    }\n\n    const handleRightArrowClick = () => {\n        setOffset((currentOffset) => {\n            const maxOffset = -(width * (items.length - 1));\n\n            return Math.max(currentOffset - width, maxOffset);\n        });\n    }\n\n    React.useEffect(() => {\n        setItems(\n            React.Children.map(children, child => {\n                return React.cloneElement(child, {\n                    style: {\n                        height: '100%',\n                        minWidth: `${width}px`,\n                        maxWidth: `${width}px`,\n                    }\n                });\n            })\n        );\n    }, []);\n\n    return (\n        <div className=\"carousel-mainContainer\">\n            <FaChevronLeft className=\"arrow\" onClick={handleLeftArrowClick}/>\n            <div className=\"carousel-mainContainer-window\">\n                <div className=\"all-items-container\"\n                    style={{\n                        transform: `translateX(${offset}px)`,\n                    }}\n                >\n                    {items}\n                </div>\n            </div>\n            <FaChevronRight className=\"arrow\" onClick={handleRightArrowClick}/>\n        </div>\n    );\n}\n\nexport default Carousel;"],"mappings":";;AAAA,OAAOA,KAAK,MAAmB,OAAO;AACtC,SAASC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC9D,OAAO,iBAAiB;AAAC;AACzB,MAAMC,QAAQ,GAAG,QAGX;EAAA;EAAA,IAHY;IAACC,QAAQ;IAAEC;EAG7B,CAAC;EACG,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGP,KAAK,CAACQ,QAAQ,CAAc,EAAE,CAAC;EACzD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGV,KAAK,CAACQ,QAAQ,CAAS,CAAC,CAAC;EAErD,MAAMG,oBAAoB,GAAG,MAAM;IAC/BD,SAAS,CAAEE,aAAa,IAAK;MACzB,OAAOC,IAAI,CAACC,GAAG,CAACF,aAAa,GAAGP,KAAK,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;EACN,CAAC;EAED,MAAMU,qBAAqB,GAAG,MAAM;IAChCL,SAAS,CAAEE,aAAa,IAAK;MACzB,MAAMI,SAAS,GAAG,EAAEX,KAAK,IAAIC,KAAK,CAACW,MAAM,GAAG,CAAC,CAAC,CAAC;MAE/C,OAAOJ,IAAI,CAACK,GAAG,CAACN,aAAa,GAAGP,KAAK,EAAEW,SAAS,CAAC;IACrD,CAAC,CAAC;EACN,CAAC;EAEDhB,KAAK,CAACmB,SAAS,CAAC,MAAM;IAClBZ,QAAQ,CACJP,KAAK,CAACoB,QAAQ,CAACC,GAAG,CAACjB,QAAQ,EAAEkB,KAAK,IAAI;MAClC,oBAAOtB,KAAK,CAACuB,YAAY,CAACD,KAAK,EAAE;QAC7BE,KAAK,EAAE;UACHC,MAAM,EAAE,MAAM;UACdC,QAAQ,EAAG,GAAErB,KAAM,IAAG;UACtBsB,QAAQ,EAAG,GAAEtB,KAAM;QACvB;MACJ,CAAC,CAAC;IACN,CAAC,CAAC,CACL;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI;IAAK,SAAS,EAAC,wBAAwB;IAAA,wBACnC,QAAC,aAAa;MAAC,SAAS,EAAC,OAAO;MAAC,OAAO,EAAEM;IAAqB;MAAA;MAAA;MAAA;IAAA,QAAE,eACjE;MAAK,SAAS,EAAC,+BAA+B;MAAA,uBAC1C;QAAK,SAAS,EAAC,qBAAqB;QAChC,KAAK,EAAE;UACHiB,SAAS,EAAG,cAAanB,MAAO;QACpC,CAAE;QAAA,UAEDH;MAAK;QAAA;QAAA;QAAA;MAAA;IACJ;MAAA;MAAA;MAAA;IAAA,QACJ,eACN,QAAC,cAAc;MAAC,SAAS,EAAC,OAAO;MAAC,OAAO,EAAES;IAAsB;MAAA;MAAA;MAAA;IAAA,QAAE;EAAA;IAAA;IAAA;IAAA;EAAA,QACjE;AAEd,CAAC;AAAA,GAlDKZ,QAAQ;AAAA,KAARA,QAAQ;AAoDd,eAAeA,QAAQ;AAAC;AAAA"},"metadata":{},"sourceType":"module"}